<template>
    <div class="lable-page">
        <div class="lable-item" v-for="(item, key) in itemList" :key=key :class="{itemactive: onItem == key}" @click="changeActive(key)">{{item.coursename}}</div>
    </div>
</template>

<script>
export default {
  name: 'lable_page',
  data() {
    return{
      onItem: '0'
    }
  },
  props: {
    itemList: {
      type: Array,
      required: true
    }
  },
  created() {
   
  },
  mounted: function () {
  },
  methods: {
    changeActive (on) {
        this.onItem = on;
        this.$emit('changeLable',on)
    } 
  },
  watch:{
   
  } 
}
</script>

<style lang="stylus" scoped>
.lable-page{
    width: 100%;
    height:58px;
    background:rgba(255,255,255,1);
    border-bottom: 1px solid rgba(238,238,238,1);
    padding-left: 10px;  
}
.lable-item{
    display: inline-block;
    font-family:MicrosoftYaHei;
    font-size:16px;
    line-height: 16px;
    color:rgba(130,130,130,1);
    padding: 21px 20px;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    &:hover{
        color:rgba(20,87,253,1);
    }
    &:hover:after{
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -10px;
        content: '';
        width:20px;
        height:4px;
        color:rgba(20,87,253,1);
        background:rgba(20,87,253,1);  
    }
}
.itemactive{
    color:rgba(20,87,253,1);
}
.itemactive:after{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    content: '';
    width:20px;
    height:4px;
    background:rgba(20,87,253,1);  
}
</style>
